<template>
	<view class="wrap safe-area">
		<view class="wrap-list">
			<block v-for="(item, index) in list" :key="index">
				<view class="item">
					<view class="order-num">
						订单编号:{{ item.order_no }}
					</view>
					
					<view class="wrap-goods-list">
						<block v-for="(subItem, idx) in item.ordergoods" :key="idx">
							<view class="goods-info flex align-center">
								<view class="file">
									<image class="img" :src="$wanlshop.oss(subItem.image)" />
								</view>
								
								<view class="right flex column just-between">
									<view class="goods-name limit-num-line">
										{{ subItem.title }}
									</view>
									
									<view class="price-num flex align-center just-between">
										<view class="price">
											￥{{ subItem.price }}
										</view>
										
										<view class="num">
											x{{ subItem.number }}
										</view>
									</view>
								</view>
							</view>
						</block>
					</view>
					
					<view class="time">
						核销时间:{{ item.createtime_text }}
					</view>
				</view>
			</block>
		</view>
		
		<wanl-empty v-if="list.length === 0" text="暂无数据" />
	</view>
</template>

<script>
	import { GetCheckList } from "@/utils/API.js";
	export default {
		data() {
			return {
				page: 1,
				total: 0,
				list: [],
			};
		},
		onLoad() {
			this.onRefresh();
		},
		onPullDownRefresh() {
			this.onRefresh();
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.page++;
				this.getData();
			}
		},
		methods: {
			/**
			 * 刷新
			 */
			onRefresh() {
				this.page = 1;
				this.list = [];
				this.getData();
			},
			/**
			 * 网络请求
			 */
			getData() {
				GetCheckList({
					page: this.page,
					status: "1"
				}).then(res => {
					this.total = res.data.list.total;
					const list = res.data.list.data;
					if (this.page == 1) {
						this.list = list;
					} else {
						this.list = this.list.concat(list);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.wrap {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		
		.wrap-list {
			width: 100%;
			overflow: hidden;
			
			.item {
				width: 100%;
				background-color: white;
				border-radius: 16rpx;
				padding: 30rpx;
				box-sizing: border-box;
				margin-bottom: 20rpx;
				
				&:last-child {
					margin-bottom: 0rpx;
				}
				
				.order-num {
					color: #333333;
					font-size: 28rpx;
				}
				
				.wrap-goods-list {
					margin-top: 30rpx;
					width: 100%;
					overflow: hidden;
					
					.goods-info {
						width: 100%;
						overflow: hidden;
						gap: 25rpx;
						margin-bottom: 30rpx;
						
						&:last-child {
							margin-bottom: 0rpx;
						}
						
						.file {
							width: 130rpx;
							height: 130rpx;
							border-radius: 16rpx;
							overflow: hidden;
							
							.img {
								width: 100%;
								height: 100%;
							}
						}
						
						.right {
							flex: 1;
							height: 130rpx;
							overflow: hidden;
							
							.goods-name {
								--limit-num: 2;
								color: #333333;
								font-size: 26rpx;
							}
							
							.price-num {
								width: 100%;
								overflow: hidden;
								
								.price {
									color: #FF0000;
									font-size: 33rpx;
									font-weight: bold;
								}
								
								.num {
									color: #999999;
									font-size: 30rpx;
								}
							}
						}
					}
				}
				
				.time {
					margin-top: 30rpx;
					color: #999999;
					font-size: 26rpx;
				}
			}
		}
	}
</style>
